<!--
 * @Description: 表单发布
 * @Author: zhailei
 * @Date: 2021-08-12 17:08:19
 * @LastEditTime: 2021-08-12 18:05:24
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\pages\form\formModule\releaseModal.vue
-->
<template>
  <t-modal
    :title="title"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @cancel="
      () => {
        $emit('update:visible', false);
      }
    "
    @ok="
      () => {
        $emit('ok');
      }
    "
  >
    <a-alert
      message="绑定完菜单后请前往【平台管理】->【系统权限】->【岗位角色权限】给对应的角色进行授权"
      type="warning"
      banner
    />
    <a-form :form="form">
      <a-form-item
        :label="$ct('BindWebMenu', '绑定web端')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="!model.webMenuUuid"
      >
        <a-input-group>
          <a-row :gutter="24">
            <a-col :span="14">
              <depart-popup
                title="菜单管理"
                searchPlaceholder="请输入菜单名称"
                placeholder="请选择菜单"
                url="/system/menu/getTreeSysMenuByForm?type=menu"
                getDetailUrl="/system/menu/getListSysMenuById"
                labelName="menuName"
                valueName="id"
                detailId="id"
                v-decorator="['webPid']"
              ></depart-popup>
            </a-col>
            <a-col :span="10">
              <a-input
                v-decorator="['webText', { initialValue: webMenuName }]"
                placeholder="菜单名称"
              />
            </a-col>
          </a-row>
        </a-input-group>
      </a-form-item>
      <a-form-item
        :label="$ct('BindAppEnd', '绑定app端')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        v-if="formType != 'createPage' && !model.appMenuUuid"
      >
        <a-input-group>
          <a-row :gutter="24">
            <a-col :span="14">
              <depart-popup
                title="菜单管理"
                searchPlaceholder="请输入菜单名称"
                placeholder="请选择菜单"
                url="/system/menu/getTreeSysMenuByForm?type=APP"
                getDetailUrl="/system/menu/getListSysMenuById"
                labelName="menuName"
                valueName="id"
                detailId="id"
                v-decorator="['appPid']"
              ></depart-popup>
            </a-col>
            <a-col :span="10">
              <a-input
                v-decorator="['appText', { initialValue: appMenuName }]"
                placeholder="菜单名称"
              />
            </a-col>
          </a-row>
        </a-input-group>
      </a-form-item>

      <a-form-item
        :label="$ct('resourceIcon', '资源图标')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <icon-font-picker
          v-decorator="['iconCls', { initialValue: '' }]"
          @change="handleIconChoose"
        ></icon-font-picker>
      </a-form-item>
      <a-form-item class="hiddenItem" v-if="!model.webMenuUuid">
        <a-input
          v-decorator="['webUrl', { initialValue: webMenuUrl }]"
          type="hidden"
        />
      </a-form-item>
      <a-form-item class="hiddenItem" v-if="!model.appMenuUuid">
        <a-input
          v-decorator="['appUrl', { initialValue: appMenuUrl }]"
          type="hidden"
        />
      </a-form-item>
    </a-form>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
import iconFontPicker from "@/components/TopVUI/font/iconFontPicker";
import { DepartPopup } from "@/components";
const fields = ["pid", "text", "iconCls", "url"];
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    iconFontPicker,
    DepartPopup,
  },
  data() {
    return {
      title: this.$ct("bindMenu", "绑定菜单"),
      icon: [],
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 18,
        },
      },
      form: this.$form.createForm(this),
      formType: "",
      webMenuUrl: "",
      appMenuUrl: "",
      webMenuName: "",
      appMenuName: "",
    };
  },
  mounted: function() {},
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      // this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
  methods: {
    add(m) {
      this.formType = m.type;
      if (m.type === "createPage") {
        this.webMenuUrl = "/form/pageDesign/pageView?tableUuid=" + m.uuid;
        this.webMenuName = m.name;
      } else {
        this.webMenuUrl = "/form/formPreview/index?tableUuid=" + m.uuid;
        this.appMenuUrl = "/pages/model/list/list?uuid=" + m.uuid;
        this.webMenuName = m.name;
        this.appMenuName = m.name;
      }
    },
    handleIconChoose(value) {
      this.form.setFieldsValue({
        iconCls: value,
      });
    },
  },
};
</script>

<style></style>
